<template>
<div>
    <el-form ref="schedul" style="schedul-form" :model="dispatchData.form" :rules="rules" @submit.native.prevent>
        <el-form-item label-width="100px" class="dispatch-set-switch" label="实验调度"><el-switch v-model="status" @change="handleSwichChange"></el-switch></el-form-item>
        <div style="display: flex">
            <el-form-item style="margin-right: 16px;" label="调度周期" label-width="100px" prop="period">
                <el-input v-model="dispatchData.form.period" :readonly="readonlyInput" placeholder="请输入周期"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="dispatchData.form.periodType">
                    <el-option
                        v-for="(item, i) in periodTypeList"
                        :key="i"
                        :label="item"
                        :value="i + 1">
                    </el-option>
                </el-select>
            </el-form-item>
        </div>
        <div style="display: flex" v-if="dispatchData.form.periodType === 4 || dispatchData.form.periodType === 5">
            <el-form-item label-width="100px" label="调度时刻" prop="moment">
                <el-select style="margin-right: 16px;" @change="changeTime" v-model="dispatchData.form.moment" placeholder="请选择调度时刻">
                    <el-option
                        v-for="(item, i) in momentList"
                        :key="i"
                        :label="dispatchData.form.periodType === 4 ? item : `每月${item}号`"
                        :value="i + 1">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="schedulTime">
                <el-time-picker
                    v-model="dispatchData.form.schedulTime"
                    @change="changeTime"
                    :format="timeFormat"
                    placeholder="请选择调度时间">
                </el-time-picker>
            </el-form-item>
        </div>
        <el-form-item label-width="100px" v-else prop="schedulTime" label="调度时刻">
            <el-time-picker
                popper-class="schedul-moment"
                v-model="dispatchData.form.schedulTime"
                @focus="focusTime"
                @change="changeTime"
                :format="timeFormat"
                placeholder="请选择调度时刻">
            </el-time-picker>
            <span v-if="dispatchData.form.periodType === 2" style="margin-left: 18px">(分 : 秒)</span>
            <span v-if="dispatchData.form.periodType === 1" style="margin-left: 18px">(秒)</span>
        </el-form-item>
        <el-form-item label-width="100px" prop="time" label="起止日期">
            <el-date-picker
                v-model="dispatchData.form.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
    </el-form>
    <control-schedul v-if="closeSwichDialog.show" :data="closeSwichDialog" @click="handleControlSchedul"></control-schedul>
</div>
</template>

<script>
import controlSchedul from './ControlSchedul'
export default {
    name: 'SchedulSetting',
    props: {
        dispatchData: {
            type: Object,
            required: true
        }
    },
    components: {
        controlSchedul
    },
    data () {
        var checkPeriod = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('调度周期不能为空'))
            }
            const { periodType } = this.dispatchData.form
            if (isNaN(value) || +value < 0) {
                return callback(new Error('请输入正整数'))
            }
            if (periodType === 3) {
                if (value > 31 || value < 1) {
                    return callback(new Error('周期范围：1~31'))
                }
            }
            if (periodType === 5) {
                if (value > 12 || value < 1) {
                    return callback(new Error('周期范围：1~12'))
                }
            }
            if (periodType === 2) {
                if (value > 23 || value < 1) {
                    return callback(new Error('周期范围：1~23'))
                }
            }
            if (periodType === 1) {
                if (value > 59 || value < 1) {
                    return callback(new Error('周期范围：1~59'))
                }
            }
            callback()
        }
        return {
            closeSwichDialog: {
                show: false,
                tableData: []
            },
            status: false,
            timeFormat: '',
            readonlyInput: false,
            monthDayList: [],
            weekList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
            momentList: [],
            periodTypeList: ['分钟', '小时', '天', '周', '月'],
            rules: {
                period: [{ required: true, validator: checkPeriod, trigger: 'blur' }],
                time: [{ required: true, message: '请选择起止日期', trigger: 'change' }],
                moment: [{ required: true, message: '请选择时刻', trigger: 'change' }],
                schedulTime: [{ required: true, message: '请选择时刻时间', trigger: 'change' }],
                schedul: [{ required: true, message: '请选择时刻时间', trigger: 'change' }]
            }
        }
    },
    created () {
        for (let i = 0; i < 31; i++) {
            this.monthDayList[i] = i + 1
        }
    },
    mounted () {
        const { periodType, status, downstreamSchedules } = this.dispatchData.form
        this.changePeriodType(periodType)
        this.momentList = periodType === 4 ? this.weekList : this.monthDayList
        this.status = Boolean(status)
        this.closeSwichDialog.tableData = downstreamSchedules
    },
    watch: {
        status: {
            handler (val) {
                this.dispatchData.form.status = +val
            }
        },
        'dispatchData.form.periodType': {
            handler (value) {
                this.changePeriodType(value)
                this.momentList = value === 4 ? this.weekList : this.monthDayList
                this.dispatchData.form.moment = ''
                this.dispatchData.form.schedulTime = ''
                this.changeTime()
            }
        },
        'dispatchData.form.period': {
            handler (value) {
                this.changeTime()
            }
        }
    },
    methods: {
        handleControlSchedul (val) {
            if (val === '取消') {
                this.status = true
            } else if (val === '仅关闭调度') {
                this.status = false
            } else {
                this.status = false
                this.closeSwichDialog.tableData = []
                this.$emit('clearDownstreamSchedules')
            }
            this.closeSwichDialog.show = false
        },
        handleSwichChange (state) {
            if (!state && this.closeSwichDialog.tableData.length) {
                this.closeSwichDialog.show = true
            }
        },
        focusTime () {
            this.$nextTick(() => {
                const { periodType } = this.dispatchData.form
                let dom = document.getElementsByClassName('el-time-spinner__wrapper')
                if (periodType === 2) {
                    dom[0].style = 'display: none;'
                    dom[1].style = 'width: 50%;'
                    dom[2].style = 'width: 50%;'
                } else if (periodType === 1) {
                    dom[0].style = 'display: none'
                    dom[1].style = 'display: none'
                    dom[2].style = 'width: 100%;'
                } else {
                    dom[0].style = ''
                    dom[1].style = ''
                    dom[2].style = ''
                }
            })
        },
        changePeriodType (value) {
            this.readonlyInput = value === 4
            if (value === 4) {
                this.dispatchData.form.period = 1
            }
            if (value === 2) {
                this.timeFormat = 'mm:ss'
            } else if (value === 1) {
                this.timeFormat = 'ss'
            } else {
                this.timeFormat = 'HH:mm:ss'
            }
        },
        changeTime () {
            const { period, schedulTime, periodType, moment } = this.dispatchData.form
            if (!schedulTime) return
            let obj = {}
            let hourExp = schedulTime.getHours() + ''
            let minuteExp = schedulTime.getMinutes() + ''
            let secondExp = schedulTime.getSeconds() + ''
            switch (periodType) {
            case 5:
                obj = {
                    monthExp: period,
                    dayExp: moment + '',
                    hourExp,
                    minuteExp,
                    secondExp
                }
                break
            case 3:
                obj = {
                    dayExp: period,
                    hourExp,
                    minuteExp,
                    secondExp
                }
                break
            case 4:
                obj = {
                    weekExp: moment + '',
                    hourExp,
                    minuteExp,
                    secondExp
                }
                break
            case 2:
                obj = {
                    hourExp: period,
                    minuteExp,
                    secondExp
                }
                break
            case 1:
                obj = {
                    minuteExp: period,
                    secondExp
                }
                break
            }
            this.dispatchData.form.cronObj = obj
        },
        handleSave () {
            this.$refs['schedul'].validate((valid) => {
                if (valid) {
                    this.$emit('save')
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.dispatch-set {
    .el-date-editor--datetimerange {
        width: 507px;
    }
    .el-input {
        width: 230px !important;
    }
    .dispatch-set-time {
        display: flex;
        .el-form-item {
            .el-input {
                width: auto !important;
            }
        }
    }
    .dispatch-set-switch {
        display: flex;
        align-items: center;
        .el-form-item__content {
            margin-left: 0 !important;
        }
    }
}
</style>
